<template>
	<view class="listWrap">
		<view class="roomItem" @tap="goRoomDet">
			<view class="itemCon samePar posAbso ltzero">
				<view class="tag posAbso">咨询室</view>
				<view class="zxsName posAbso ellip">反放到沙发上李开复倒是附近</view>
			</view>
		</view>
		<view class="roomItem">
			<view class="itemCon samePar posAbso ltzero">
				<view class="tag posAbso">音乐放松室</view>
				<view class="zxsName posAbso ellip">反倒是附近</view>
			</view>
		</view>
		<view class="roomItem">
			<view class="itemCon samePar posAbso ltzero">
				<view class="tag posAbso">音乐放松室</view>
				<view class="zxsName posAbso ellip">反倒是附近</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			goRoomDet(){
				uni.navigateTo({
					url:"/pages/subSqIndex/xlCen/zxRoomDet"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listWrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.roomItem{
		position: relative;
		width: 330rpx;
		height: 252rpx;
		background: pink;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		.itemCon{
			z-index: 2;
			background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 100%);
			border-radius: 16rpx;
			.tag{
				padding: 0 15rpx;
				height: 45rpx;
				line-height: 45rpx;
				font-size: 24rpx;
				color: #fff;
				background: $pss-sq-main-bg;
				left: 0;
				top: 30rpx;
				border-radius: 0 8rpx 8rpx 0;
			}
			.zxsName{
				left: 20rpx;
				right: 20rpx;
				bottom: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
				font-weight: 600;
			}
		}
	}
</style>